<template>
<!-- 文章品论列表 -->
<!-- 只有 list 在可视范围内才会检查滚动位置，触发 onload -->
<!-- immediate-check 是否在初始化时立即执行滚动位置检查，
是否在初始化直接调用onload，默认在可视范围内调用onload-->
<!-- immediate-check=false 关闭它在可视范围内初始化调用onload -->
   <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error="error"
      error-text="加载失败，点击重试"
      :immediate-check="false"
   >
      <CommentItem
         v-for="(item, index) in list"
         :key="index"
         :comment="item"
         @reply-click="$emit('reply-click', $event)"
      />
   </van-list>
</template>

<script>
import { getComments } from '@/api/comment'
import CommentItem from './comment-item.vue'
export default {
   data() {
      return {
         // list: [],
         loading: false,
         finished: false,
         // 获取下一页数据的标记
         offset: null,
         // 评论个数
         limit: 10,
         error: false
      }
   },
   props: {
      source: {
         type: [Number, String, Object],
         required: true
      },
      list: {
         type: Array,
         // vue 中验证规则不能直接定义数组跟对象的默认值
         // 父组件需要就绑定得到，不需要正常运行，运用默认值
         default: () => []
      },
      type: {
         type: String,
         // 自定义 prop 数据验证
         validator(value) {
            // 校验传入数据的值，传入的数据必须属于数组里的某个元素
            // 要么是a 要么是c
            // 返回布尔值，true 验证成功
            return ['a', 'c'].includes(value)
         },
         default: 'a'
      }
   },
   components: {
      CommentItem
   },
   created() {
      // 一上来就调用渲染
      // 手动初始 onload ，不会自动开启初始loading
      // 不让自己onload 那就自己开启 loading
      // 所以要手动开启初始 loading
      this.loading = true
      this.onLoad()
   },
   methods: {
      // 不在可视区域就不加载 在钩子函数直接渲染
      async onLoad() {
         try {
            // 获取文章的评论跟获取评论的回复是同一个接口
            // 参数不同
            // a 文章的评论
            // c 评论的回复
            // 1.请求获取数据
            const { data } = await getComments({
               // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
               type: this.type,
               // 源id，文章id或评论id
               // 在给axios请求之前，把可能超出安全整数范围的source ，toString
               // 因为 source 有可能是一个对象，对象跟字符串拼接，
               // 对象会自动 toString 跟字符串进行拼接没问题
               // 但是传递给 接口，没有进行任何拼接,所以要手动转换
               // 转换完字符串，axios 进行拼接时就不会错误了
               source: this.source.toString(),
               // 获取评论数据的偏移量，值为评论id，
               // 表示从此id的数据向后取，不传表示从第一页开始读取数据
               offset: this.offset,
               // 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
               limit: this.limit
            })

            // 2.将数据添加到列表中
            // console.log(data)
            const { results } = data.data
            this.list.push(...results)

            // 把文章评论的总数量传递到外部
            this.$emit('onload-success', data.data)
            // 3.将loading关闭
            this.loading = false
            // 4.判断是否还有数据
            if (results.length) {
               this.offset = data.data.last_id
            } else {
               this.finished = true
            }
            //       有就更新回去下一页的数据代码
            //       没有就将finished设置结束
         } catch (err) {
            this.error = true
            this.loading = false
         }
      }
   }
}
</script>

<style lang="scss" scoped></style>
